<template>
	<view class="swiper">
		<swiper :circular="swiperImgs.length > 1" class="topic-swiper" @change="change" :autoplay="swiperImgs.length > 1" :interval="10000">
			<block v-for="(item, index) in swiperImgs" :key="index">
				<swiper-item>
					<!-- 模糊背景 -->
					<view class="topic-bg"><image :src="item" mode="aspectFill"></image></view>
				</swiper-item>
			</block>
		</swiper>

		<view v-if="swiperImgs.length > 1" class="swiper-dot">
			<block v-for="item in swiperImgs.length" :key="item"><view class="dot" :class="[current === item - 1 ? 'active' : '']"></view></block>
		</view>

		<view class="user-info">
			<view class="user-top">
				<image v-if="userData.userHeadUrl" :src="userData.userHeadUrl" mode="aspectFill"></image>

				<block v-for="(tag, index) in userData.tagInfo" :key="index">
					<view v-if="tag.type === 'me'" :style="getRing(index)" class="tag-me">{{ tag.tagName }}</view>
					<view v-else-if="tag.type === 'need'" :style="getRing(index)" class="tag-need">{{ tag.tagName }}</view>
					<view v-else :style="getRing(index)" class="user-attr-tag">{{ tag.tagName }}</view>
				</block>
			</view>
		</view>

		<view class="nick-name">{{ userData.userNickname }}</view>
		<view class="nick-tag">
			<view v-show="userData.isReal" class="icon iconfont icon-xiangji">真人</view>
			<view v-if="userData.hasTop" class="icon iconfont" :class="[userData.sex === 0 ? 'icon-nv' : 'icon-nan']">{{ userData.sex === 0 ? '女神' : '男神' }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: { userInfo: Object },
	data() {
		return {
			current: 0,
			swiperImgs: [],
			userData: {}
		};
	},
	methods: {
		change(e) {
			this.current = e.detail.current;
		},
		getRing(index) {
			let radius = 190; // 半径
			let angle = 360 / this.userInfo.tagInfo.length; // 角度
			let offsetX = 146; // 横向偏移，当前盒子1/2宽度
			let offsetY = 146; // 纵向偏移，当前盒子1/2高度
			let arc = ((2 * Math.PI) / 360) * angle * index;
			let left = (Math.cos(arc) * radius + offsetX).toFixed(2);
			let top = (Math.sin(arc) * radius + offsetY).toFixed(2);
			return { left: `${left < 0 ? left - 8 : left}rpx`, top: `${top}rpx` };
		},
		init() {
			if (!this.userData.album || !this.userData.album.open || this.userData.album.open.length < 1) {
				this.swiperImgs = Array.of('https://tmsway.oss-cn-beijing.aliyuncs.com/image/90c855879464471b9ca89ff5d2c5ebb7.jpg');
			} else {
				this.swiperImgs = this.userData.album.open;
			}
		}
	},
	mounted() {
		this.userData = this.userInfo;
		this.init();
	}
};
</script>

<style lang="less" scoped>
.topic-swiper {
	height: 700rpx;
}
.topic-bg {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	image {
		position: absolute;
		width: 100%;
		height: 100%;
		filter: blur(0.5rpx);
	}
}

.swiper {
	position: relative;

	.swiper-dot {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		.dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.7);
			margin: 10rpx;
		}
		.active {
			width: 40rpx;
			background: #ffffff;
			height: 16rpx;
			border-radius: 10rpx;
		}
	}

	.user-info {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.user-top {
			width: 280rpx;
			height: 280rpx;
			position: relative;

			image {
				overflow: hidden;
				border-radius: 50%;
				width: 100%;
				height: 100%;
				border: 6rpx solid #ffffff;
			}

			view {
				width: 70rpx;
				position: absolute;
				transform: translate(-50%, -50%);
				text-align: center;
				font-size: 20rpx;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 10rpx;
				padding: 0 10rpx;
			}
			.tag-me {
				color: #ff89ab;
			}
			.tag-need {
				color: #8f89ff;
			}
			.user-attr-tag {
				color: #ffd400;
			}
		}
	}

	.nick-name {
		padding-left: 40rpx;
		position: absolute;
		bottom: 25rpx;
		left: 0;
		color: #ffffff;
		font-weight: 500;
	}

	.nick-tag {
		padding-right: 40rpx;
		position: absolute;
		bottom: 30rpx;
		right: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		view {
			padding: 8rpx 15rpx;
			border-radius: 12rpx;
			color: #ffffff;
			line-height: 24rpx;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
		.icon-xiangji {
			background: linear-gradient(270deg, #ffa93d 0%, #ffcf60 100%);
		}
		.icon-xiangji:before {
			margin-right: 5rpx;
		}
		.icon-nv {
			background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
		}
		.icon-nv:before {
			font-size: 20rpx;
			margin-right: 5rpx;
		}

		.icon-nan {
			background: linear-gradient(270deg, #6679ff 0%, #96a6ff 100%);
		}
		.icon-nan:before {
			font-size: 20rpx;
			margin-right: 5rpx;
		}
	}
}
</style>
